function createScrollBarContainers(mainDivID, appendTo) {
    $('<div/>', { id:mainDivID}).appendTo(appendTo);
    $('<div/>', { class:"scrollbar"}).appendTo('#'+mainDivID);
    $('<div/>', { class:"track"}).appendTo('.scrollbar');
    $('<div/>', { class:"thumb"}).appendTo('.track');
    $('<div/>', { class:"end"}).appendTo('.thumb');

    $('<div/>', { class:"viewport"}).appendTo('#'+mainDivID);
    log("createScrollBarContainers");
}
function rankings() {
    createScrollBarContainers("scrollbar1", "#menu");
    $('<div/>', {
        id:"rankings-list",
        class:"overview"
    }).appendTo('#scrollbar1 .viewport');

    $('<div/>', {
        class:"highscore-player",
        id:'header'
    }).appendTo('#rankings-list');

    $('<div/>', {
        class:'highscores-column'
    }).appendTo('#header');
    $('<div/>', {
        class:'highscores-column'
    }).text('name').appendTo('#header');
    $('<div/>', {
        class:'highscores-column'
    }).text('score').appendTo('#header');
    $('<div/>', {
        class:'highscores-column'
    }).text('Played games').appendTo('#header');
    $('<div/>', {
        class:'highscores-column'
    }).text('Is online').appendTo('#header');
    $('#scrollbar1').tinyscrollbar();
    queryRankings();
}
function makeHighScoreColumns(id, appendTo, columnsNr) {
    for (var i = 1; i <= columnsNr; i ++) {
        $('<div/>', {
            class:'highscores-column',
            id: '' + i + '' + id
        }).appendTo(appendTo);
    }
}
function addHighscorePlayer(myData) {
    $('<div/>', {
        class:"highscore-player",
        id:myData.UID
    }).appendTo('#rankings-list');

    makeHighScoreColumns(myData.UID, '#' + myData.UID, 5);

    jQuery('<img/>', {src:getFBSquarePictureUrlById(myData.UID)}).appendTo('#1' + myData.UID);
    jQuery('#3' + myData.UID).text(myData['score']);
    jQuery('#4' + myData.UID).text(myData['nrOfPlayedGames']);
    jQuery('#5' + myData.UID).text(
        myData.isOnline == 'true' || myData.isOnline === true ? 'yes': 'no'
    );
    getFacebookNameById(
        myData.UID,
        function(name, htmlId) {
            document.getElementById(htmlId).innerHTML = name;
        },
        '2' + myData.UID
    );
}

function queryRankings() {
    jQuery.ajax({
        url:"/lobby/getHighScores",
        success: function (data) {
            for (var i = 0; i < data.userList.length; i++) {
                addHighscorePlayer(data.userList[i]);
            }
            setTimeout(function() {
                try {
                    var oScrollbar = $('#scrollbar1');
                    oScrollbar.tinyscrollbar();
                    oScrollbar.tinyscrollbar_update();
                } catch(e) {
                    stickyError("Unknow rankings scrollbar error occurred", e);
                }
            }, 1000);
        },
        error: function (data) {
            stickyError("Error on querying rankings data", data);
        },
        type:"get",
        timeout:30000
    });
}